/**
 * @name BlockMove
 * @description 滑块移动验证
 */

import React, { Component } from "react";
import { Title } from "@/component";
import { Icon } from "antd";
import $ from "jquery";
import styles from "./styles.module.less";

class BlockMove extends Component {
  state = {
    textMess: "向右移动滑块,完成验证",
    type: false //验证状态，false为验证失败，true验证成功
  };
  componentDidMount() {
    this.onMouseDown();
  }
  /**
   * @name onMouseDown
   * @description 监听鼠标点击
   */
  onMouseDown = () => {
    let outBox = document.getElementById("out_mouse");
    let mouseBox = document.getElementById("mouse");
    let that = this;
    mouseBox.onmousedown = function (ev) {
      let ev00 = ev || window.event;
      let px = ev00.pageX; //初始位置，对于整个页面来说，光标点击位置
      let oL = this.offsetLeft; //初始位置，对于有定位的父级，元素边框侧与父级边框侧的距离 初始为0

      mouseBox.onmousemove = function (evs) {
        let ev01 = evs || window.event;
        let px1 = ev01.pageX; //滑动后，当前鼠标所在位置
        let oL1 = px1 - px + oL; //距初始位置移动的距离
        let mouseLeft = mouseBox.offsetLeft; //滑块相对于父元素，距离左侧距离
        if (mouseLeft === outBox.clientWidth - mouseBox.clientWidth) {
          //验证成功的不可逆操作
          this.onmousemove = null;
          that.textChange();
          return;
        }
        if (oL1 <= 0) {
          oL1 = 0;
        } else if (oL1 > outBox.clientWidth - mouseBox.clientWidth) {
          oL1 = outBox.clientWidth - mouseBox.clientWidth;
        }

        $("#mouse").css("margin-left", oL1);
        $("#colorbg").css("width", oL1);
      };
      mouseBox.onmouseup = function () {
        that.cancelMove();
      };
    };
  };
  /**
   * @name textChange
   * @description 验证成功，信息变化
   */
  textChange = () => {
    this.setState({ textMess: "验证成功", type: true });
  };
  /**
   * @name cancelMove
   * @description 鼠标离开滑块，滑块停止滑动并复位
   */
  cancelMove = () => {
    let outBox = document.getElementById("out_mouse");
    let mouseBox = document.getElementById("mouse");
    let mouseLeft = mouseBox.offsetLeft;
    mouseBox.onmousemove = null;
    if (mouseLeft !== outBox.clientWidth - mouseBox.clientWidth) {
      $("#mouse").animate({ "margin-left": 0 }, 200);
      $("#colorbg").animate({ width: 0 }, 200);
    }
  };

  render() {
    const { textMess, type } = this.state;
    return (
      <div>
        <h3>BlockMove</h3>
        <div className={styles.block}>
          <Title text="滑块验证" />
          <div id="out_mouse" className={styles.outBkock}>
            <div id="mouse" className={styles.moveBkock} style={{ cursor: type ? "default" : null }} onMouseLeave={this.cancelMove}>
              {type ? <Icon type="check-circle" className={styles.icon_check} /> : <Icon type="arrow-right" className={styles.icon_check} />}
            </div>
            {/**绿色背景 */}
            <div id="colorbg" className={styles.posBkockColor}>
              {type && <div style={{ color: "#fff" }}>{textMess}</div>}
            </div>
            {/**默认背景 */}
            <div className={styles.posBkockDefault}>
              <div>{textMess}</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default BlockMove;
